{% extends "mturk/base_fixed.html" %}
{% load humanize %}
{% load compress %}

{% block css %}{{ block.super }}
<link href="{{ STATIC_URL }}css/intrinsic/mturk.css" rel="stylesheet" type="text/css"/>
{% endblock %}

{% block content %}
<div id="mt-top-nohover">
	<div id="mt-instructions">
		<span>Instructions: which point has a <u>darker</u> surface color? (<span id="image-index">Loading ...</span>)</span>
		<span class="pull-right">
			<button type="button" id='btn-highlight' class="btn" disabled="disabled">Highlight points (H)</button>&nbsp;
			<a id="btn-instructions" href="#modal-instructions" role="button" class="btn" data-toggle="modal">Instructions (I)</a>&nbsp;
			<button type="button" id='btn-back' class="btn" disabled="disabled">Back (B)</button>&nbsp;
			<button type="button" id='btn-submit' class="btn btn-primary" disabled="disabled">Submit (Enter)</button>
		</span>
	</div>
	<div id="mt-responses">
		<span style="margin-right: 10px">Answer:</span>
		<div class="btn-group" data-toggle="buttons-radio">
			<button type="button" id='btn-1' class="btn btn-red response response-darker" disabled="disabled" data-darker="1">Point 1 (1)</button>&nbsp;
			<button type="button" id='btn-2' class="btn btn-blue response response-darker" disabled="disabled" data-darker="2">Point 2 (2)</button>&nbsp;
			<button type="button" id='btn-S' class="btn btn-info response response-darker" disabled="disabled" data-darker="E">About the same (S)</button>
		</div>
		<span style="margin-left: 10px; margin-right: 10px">Confidence:</span>
		<div class="btn-group">
			<button type="button" id='btn-G' class="btn btn-info response response-confidence" disabled="disabled" data-confidence="0">Guessing (G)</button>&nbsp;
			<button type="button" id='btn-P' class="btn btn-info response response-confidence" disabled="disabled" data-confidence="1">Probably (P)</button>&nbsp;
			<button type="button" id='btn-D' class="btn btn-info response response-confidence" disabled="disabled" data-confidence="2">Definitely (D)</button>
		</div>
		<span class="pull-right">
			<button type="button" id='btn-zoom-out' class="btn" disabled="disabled">Zoom Out (Z)</button>&nbsp;
		</span>
	</div>
</div>
<div id="mt-container"></div>
<div id="mt-done" style="display:none; padding: 20px">
	<h1>Done!</h1>
	<p>You can submit now, or press &quot;back&quot; (B) if you made a mistake.</p>
	<p>Shortcut: press <b>enter</b> to submit.</p>
</div>
{% endblock content %}

{% block scripts %}{{ block.super }}
{% include "mturk/content_json_script.html" %}

<script type="text/javascript" src="{{ STATIC_URL }}js/d3.v3.min.js"></script>
{% compress js %}
<script type="text/javascript" src="{{ STATIC_URL }}js/array_remove.js"></script>
<script type="text/coffeescript" src="{{ STATIC_URL }}js/common/util.coffee"></script>
<script type="text/coffeescript" src="{{ STATIC_URL }}js/common/modals.coffee"></script>
<script type="text/coffeescript" src="{{ STATIC_URL }}js/common/geom.coffee"></script>
<script type="text/coffeescript" src="{{ STATIC_URL }}js/common/active_timer.coffee"></script>
<script type="text/coffeescript" src="{{ STATIC_URL }}js/common/svg_photo_zoom_ui.coffee"></script>
<script type="text/coffeescript" src="{{ STATIC_URL }}js/mturk/submit.coffee"></script>
<script type="text/coffeescript" src="{{ STATIC_URL }}js/intrinsic/experiments/intrinsic_compare_ui.coffee"></script>
<script type="text/coffeescript" src="{{ STATIC_URL }}js/intrinsic/experiments/intrinsic_compare.coffee"></script>
{% endcompress %}

{% endblock %}
